﻿<!DOCTYPE html>
<html class="L_UI">
<head>
    <meta charset="utf-8" />
    <title>银行流水记录明细</title>
    <link href="/CSS/Main.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/Content/lib/iview/styles/iview.css">
</head>
<body>
    <div class="Window" id="app">
        <div class="Header" style="height:20px;text-align:right;padding:0 10px;">
            <span>本页发生额：{{SUM_MONEY_PAGE==null?"-":SUM_MONEY_PAGE}}元</span>

            <!--<%#Utility.Helper.HtmlHelper.QyFormat(Convert.ToDecimal(Eval("n_amount")))%>-->
        </div>
        <div class="Content" style="top:20px;">
            <div ref="TABLE_PANLE" class="Pg-Content" style="bottom:40px;overflow-y:initial;">
                <i-Table :loading="FORM_DATA.LODING" @on-sort-change="SORT_CHANG" size="small" border :columns="FORM_DATA.COLUMNS" :data="FORM_DATA.DATA" :height="FORM_DATA.HEIGHT">
                </i-Table>
            </div>
            <div class="Pg" style="text-align:center;height:40px;padding:4px 0;">
                <template>
                    <Page show-sizer :total="FORM_DATA.TOTAL" :page-size="FORM_DATA.PAGE_SIZE" :current="FORM_DATA.CURRENT_PAGE" @on-page-size-change="PAGE_SIZE_CHANG" @on-change="PAGE_CHANGE" />
                </template>
            </div>
        </div>
    </div>
    <script src="/UserCotrols/My97DatePicker/WdatePicker.js"></script>
    <script src="/Content/lib/vue/vue-2.5.17.min.js"></script>
    <script src="/Content/lib/axios/axios.js"></script>
    <script type="text/javascript" src="/Content/lib/iview/iview.min.js"></script>
    <script src="/Scripts/jquery.1.11.1.js"></script>
    <script src="/Scripts/Thk.Utility.js"></script>
    <script src="/Scripts/Thk.Component.js"></script>
    <script type="text/javascript">
        //构造Web程序入口
        var app = new Vue({
            el: "#app",
            data: {
                FORM_YEAR: null,
                FORM_MONTH: null,
                FORM_WEEK: null,
                FORM_NID: null,
                FORM_D_CODE: null,
                FORM_APPLY_ID: null,
                FORM_TYPE: null,
                FORM_COMPANY_ID: null,
                FORM_PRO_ID: null,
                SUM_MONEY: null,
                SUM_MONEY_PAGE: null,
                FORM_DATA: {
                    HEIGHT:400,
                    COLUMNS: [
                        {
                            type: 'index',
                            title: "序号",
                            align: "center",
                            width: 60
                        },
                        {
                            title: "匹配日期",
                            key: "D_TRANDATE",
                            width: 105,
                            align: "center",
                            render: function (h, params) {
                                //console.log(params);
                                var date = new Date(params.row.D_TRANDATE);
                                //console.log(params.row.D_TRANDATE);
                                return h('div', date.format("yyyy-MM-dd"));
                            },
                            sortable: true
                        },
                        {
                            title: "账号",
                            key: "C_ACCNO1",
                            minWidth: 200,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "对方账号",
                            key: "C_ACCNO2",
                            minWidth: 200,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "对方账号名称",
                            key: "C_ACC_NAME1",
                            minWidth: 200,
                            tooltip: true,
                            sortable: true
                        },
                        {
                            title: "客户公司",
                            key: "CUSTER_NAME",
                            minWidth: 200,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "银行",
                            key: "C_CADBANK_NM",
                            minWidth: 200,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "用气类型",
                            key: "CUSTOMER_TYPE",
                            minWidth: 105,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "发生额",
                            key: "N_AMT",
                            minWidth: 100,
                            tooltip: true,
                            align: "right",
                            sortable: true
                        }
                        ,
                        {
                            title: "借贷标志",
                            key: "FLAG_MSG",
                            width: 105,
                            tooltip: true,
                            align: "center",
                            sortable: true
                        }

                        ,
                        {
                            title: "银行流水号",
                            key: "C_PROWEEKNUM",
                            width: 200,
                            align: "center",
                            tooltip: true
                        }
                        ,
                        {
                            title: "备注",
                            key: "C_DET",
                            minWidth: 100,
                            tooltip: true,
                            sortable: true
                        }
                        ,
                        {
                            title: "所属计划周",
                            key: "USE_WEEK",
                            align:"center",
                            width: 100,
                            sortable: true
                        }
                    ],
                    DATA: [],
                    CURRENT_PAGE: 1,
                    TOTAL: 100,
                    PAGE_SIZE: 40,
                    LODING: true,
                    WhereStr: ""
                },
                FORM_PARMS: {}
            },
            methods: {
                SELECT: function (ifFirst) {
                    var that = this;
                    that.FORM_DATA.LODING = true;
                    if (ifFirst) {
                        that.FORM_DATA.CURRENT_PAGE = 1;
                    }
                    //拼接条件
                    var data = window.Helper.Object.Copy(that.FORM_PARMS);
                    data.IfFirst = ifFirst;
                    data.SortStr = "D_TRANDATE ASC";
                    data.PageSize = that.FORM_DATA.PAGE_SIZE;
                    data.CurrentPage = that.FORM_DATA.CURRENT_PAGE;
                    axios.post("/Module/ProjectDetails/BankList_ProjectDetails.aspx?TYPE=API", JSON.stringify(data))
                        .then(result => {
                            if (result.status != 200) {

                                return;
                            }
                            console.log(result.data);
                            var data = result.data;
                            if (ifFirst) {
                                that.FORM_DATA.TOTAL = data.Data.Count;
                            }
                            that.FORM_DATA.DATA = data.Data.Data;
                            var pageSum=0
                            for (var i = 0; i < data.Data.Data.length; i++) {
                                pageSum = pageSum + data.Data.Data[i].N_AMT*100;
                            }
                            console.log(pageSum);
                            that.SUM_MONEY_PAGE = pageSum/100;
                            that.FORM_DATA.LODING = false;
                    });
                },
                PAGE_SIZE_CHANG: function (size) {
                    //this.FORM_DATA.CURRENT_PAGE = size;
                    //this.SELECT(false);
                    this.FORM_DATA.PAGE_SIZE = size;
                    this.SELECT(true);
                },
                PAGE_CHANGE: function (size) {
                    this.FORM_DATA.CURRENT_PAGE = size;
                    this.SELECT(false);
                },
                SORT_CHANG: function (column, key, order) {

                },
                AUTO_MATCHING: function () {

                },
                GET_QUERY_STRING: function (name) {
                    return window.Helper.Url.Query(name);
                }
            },
            mounted: function () {
                var that = this;
                Math.formatFloat = function (f, digit) {
                    var m = Math.pow(10, digit);
                    return parseInt(f * m, 10) / m;
                }
                that.FORM_PARMS.TYPE_CODE = that.GET_QUERY_STRING("TYPE_CODE");
                that.FORM_PARMS.TYPE_KEY = that.GET_QUERY_STRING("TYPE_KEY");
                that.FORM_PARMS.CMY_ID = that.GET_QUERY_STRING("CMY_ID") == null ? top.LoginUser.USER_COMPANY.toString() : that.GET_QUERY_STRING("CMY_ID");
                that.FORM_PARMS.YEAR = that.GET_QUERY_STRING("YEAR");
                switch (that.FORM_PARMS.TYPE_CODE) {
                    case "WEEK":
                        that.FORM_PARMS.MONTH = that.GET_QUERY_STRING("MONTH");
                        that.FORM_PARMS.WEEK = that.GET_QUERY_STRING("WEEK");
                        break;
                    case "MONTH":
                        that.FORM_PARMS.MONTH = that.GET_QUERY_STRING("MONTH");
                        break;
                    default:
                }
                switch (parseInt(that.FORM_PARMS.TYPE_KEY)) {
                    case 0:
                        that.FORM_PARMS.PRO_ID = that.GET_QUERY_STRING("PRO_ID");
                        break;
                    case 1:
                        //console.log(window.location);
                        //console.log(that.GET_QUERY_STRING("TYPE_NAME"));
                        that.FORM_PARMS.TYPE_NAME = that.GET_QUERY_STRING("TYPE_NAME");
                        break;
                    case 2:
                        that.FORM_PARMS.USER_TYPE = that.GET_QUERY_STRING("USER_TYPE");
                        break;
                    case 3:
                    case 4:
                        that.FORM_PARMS.CUSTOMER_NAME = that.GET_QUERY_STRING("CUSTOMER_NAME");
                        break;
                    case 5:
                    case 6:
                        that.FORM_PARMS.CUSTOMER_NAME = that.GET_QUERY_STRING("CUSTOMER_NAME");
                        that.FORM_PARMS.PROJECT_NAME = that.GET_QUERY_STRING("PROJECT_NAME");
                        break;
                    default:
                }
                window.App = that;
                that.FORM_DATA.HEIGHT = that.$refs.TABLE_PANLE.clientHeight;
                that.SELECT(true);
                window.onresize = function () {
                    console.log(that.$refs);
                    that.FORM_DATA.HEIGHT = that.$refs.TABLE_PANLE.clientHeight;
                };
            }
        });
    </script>
</body>
</html>